import React, { forwardRef } from 'react';
import classNames from 'classnames';
import styles from './Draggable.module.less';


const Draggable = forwardRef(
  function Draggable(
    {
      dragOverlay,
      dragging,
      children,
      listeners,
      transform,
      style,
      drag,
      percent,
      ...props
    },
    ref
  ) {
    return (
      <div
        className={classNames(
          styles.Draggable,
          dragOverlay && styles.dragOverlay,
          dragging && styles.dragging,
        )}
        style={
          {
            ...style,
            '--translate-x': `${transform?.x / percent ?? 0}px`,
            '--translate-y': `${transform?.y / percent ?? 0}px`,
            '--border-color': !drag ? "transparent" : "#666"
          }
        }
        {...listeners}
        ref={ref}
      >
        {children}

      </div>
    );
  }
);

export default Draggable